<template>
	<view class="theme" :class="theme+'-bg-middle'">
		<view class="navBox" :class="theme+'-bg-hbox'">
			<view class="nav line" @click="handleChangeSkin" :class="theme+'-bg-cbox'">
				<view class="nav-l">
					<view class="icon">
						<image src="../../../static/images/icons/yliang.png"></image>
					</view>
					<view class="text">
						<text :class="theme+'-ftext-color'">{{$t('theme.Nightmode')}}</text>
					</view>
				</view>
				<view class="nav-r">
					<view class="swin">
						<switch :checked="isDark" color="#0081FF" />
					</view>
				</view>
			</view>

			<view class="nav line" :class="theme+'-bg-cbox'">
				<view class="nav-l">
					<view class="icon">
						<image src="../../../static/images/icons/tupian1.png"></image>
					</view>
					<view class="text">
						<text :class="theme+'-ftext-color'">{{$t('theme.Customskin')}}</text>
					</view>
				</view>
				<view class="nav-r">
					<view class="swin">
						<switch />
					</view>
				</view>
			</view>
		</view>

		<view class="thecolor">
			<view class="nav">
				<view class="nav-l">
					<view class="icon">
						<image style="transition:2s" src="../../../static/images/icons/zhutiguanli.png"></image>
					</view>
					<view class="text">
						<text :class="theme+'-ftext-color'">{{$t('theme.Themecolorchange')}}</text>
					</view>
				</view>
			</view>
			<view class="nav line" v-for="(item,index) in list" @click="!isDark ? select(index) : showTowt()">
				<view class="nav-l">
					<view class="icon">
						<image :src="item.leftIcon"></image>
					</view>
					<view class="text">
						<text :class="theme+'-ftext-color'">{{locale=='en'?item.english:item.text}}</text>
					</view>
				</view>
				<view class="nav-r">
					<view class="swin">
						<view class="icon">
							<image
								:src="cutt == index ? '../../../static/images/icons/yuanxuanzho.png' : '../../../static/images/icons/yuamweixuanzho.png'">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	// 主题管理页面
	export default {
		data() {
			return {
				list: [{
					text: '墨鱼',
					english: 'Cuttlefish',
					leftIcon: '../../../static/images/icons/lanse.png',
					theme: 'light'
				}, {
					text: '雏菊',
					english: 'daisy',
					leftIcon: '../../../static/images/icons/weiju.png',
					theme: 'daisies'
				}, {
					text: '鲜橙',
					english: 'Freshorange',
					leftIcon: '../../../static/images/icons/xiancheng.png',
					theme: 'orange'
				}, {
					text: '樱花',
					english: 'Cherryblossoms',
					leftIcon: '../../../static/images/icons/yinghua.png',
					theme: 'flower'
				}, {
					text: '春意',
					english: 'Spring',
					leftIcon: '../../../static/images/icons/chunyi.png',
					theme: 'spring'
				}, {
					text: '盛夏',
					english: 'midsummer',
					leftIcon: '../../../static/images/icons/shengxia.png',
					theme: 'summer'
				}],
				cutt: uni.getStorageSync('theme').themeIndex,
				isDark: uni.getStorageSync('theme').theme == 'dark' ? true : false,
				themes: uni.getStorageSync('theme').theme,
			};
		},
		onLoad() {
			this.$theme()
		},
		onUnload() {
			this.$theme()
		},
		methods: {
			select(index) {
				this.cutt = index

				uni.setStorage({
					key: 'theme',
					data: {
						theme: this.themes,
						themeIndex: this.cutt
					},
					success: () => {
						this.setTheme()
					}
				})
			},
			setTheme() {
				this.themes = this.isDark ? 'dark' : this.list[this.cutt].theme
				uni.setStorage({
					key: 'theme',
					data: {
						theme: this.themes,
						themeIndex: this.cutt
					},
					success: () => {
						this.$theme()
						this.toggleAppTheme(this.themes)
					}
				})
			},
			showTowt() {
				uni.showToast({
					title: '请先关闭夜间模式哦',
					icon: 'none'
				})
			},
			handleChangeSkin() {
				this.isDark = !this.isDark;
				this.setTheme()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.theme {
		height: 100%;

		.navBox {
			// background-color: #DEE0DF;
			// overflow: hidden;
			// padding: 15rpx 0;
			padding-bottom: 2rpx;
		}

		.line {
			cursor: pointer;
		}

		.nav {
			height: 95rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 48rpx;
			margin-bottom: 10rpx;
			// background-color: #FFFFFF;

			.nav-l {
				display: flex;
				align-items: center;
				// justify-content: space-between;
			}

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 30rpx;
			}

			.text {
				text {
					font-size: 26rpx;
					cursor: pointer;
				}
			}

			.nav-r /deep/ {
				.swin {
					switch {
						.uni-switch-input {
							width: 72rpx;
							height: 34rpx;
							margin-right: 50rpx;
							border: 2rpx solid #dfdfdf;
							border-radius: 32rpx;
						}

						.uni-switch-input:before {
							height: 0;
						}

						.uni-switch-input:after {
							width: 30rpx;
							background-color: #fff;
							// box-shadow: 0 1px 3px #ccc;
							height: 30rpx;
							border-radius: 15rpx;
						}
					}
				}
			}
		}
	}
</style>
